@require '../css/variable.styl'
@require '../css/func.styl'

.sm-switch
	position: relative
	display: inline-block
	height: 24px
	line-height: 24px
	cursor: pointer
	user-select: none
	input[type="checkbox"]
		display: none
		&:checked ~ .sm-switch-wrapper
			.sm-switch-track
				background-color: alpha($md-colors.lightBlue500, 50%)
			.sm-switch-thumb
				background-color: $md-colors.lightBlue500
				color: $md-colors.lightBlue500
				transform: translate3d(18px, 0, 0)
			.sm-switch-ripple-wrapper
				.sm-ripple
					background-color: $md-colors.lightBlue500
	&.disabled
		input[type="checkbox"]:checked
		~ .sm-switch-wrapper
			.sm-switch-track
				background-color: $md-colors.grey400
			.sm-switch-thumb
				background-color: $md-colors.grey300

	*
		pointer-events: none
	&.disabled
		cursor: not-allowed

.sm-switch-wrapper
	display: flex
	width: 100%
	height: 24px
	align-items: center
	justify-content: space-between

.sm-switch-container
	width: 36px
	padding: 4px 0px 4px 2px
	position: relative
	margin-right: 8px
	transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1)
	.sm-switch.label-left &
		margin-right: 0
		margin-left: 8px
	.sm-switch.no-label &
		margin-left: 0
		margin-right: 0


.sm-switch-label
	color: $md-colors.darkBlack
	.sm-switch.disabled &
		color: alpha(#000, 0.38)


.sm-switch-track
	width: 100%
	height: 14px
	border-radius: 30px
	background-color: $md-colors.grey400
	transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1)
	.sm-switch.disabled &
		background-color: $md-colors.grey400

.sm-switch-thumb
	position: absolute
	top: 1px
	left: 0px
	width: 20px
	height: 20px
	line-height: 24px
	color: rgba(0, 0, 0, 0.87)
	background-color: $md-colors.grey100
	border-radius: 50%
	san-shadow(1)
	transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1)
	backface-visibility: hidden
	.sm-switch.disabled &
		background-color: $md-colors.grey300

.sm-switch .sm-switch-ripple-wrapper
	height: 200%
	width: 200%
	top: -10px
	left: -10px
